{% extends "base.html" %}
{% block head %}
    <title>分析报表</title>
    <script src="/static/js/echarts.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //get_user_info();
            $("#stat1").attr("style", "display:block;");//显示div
            $("#stat2").attr("style", "display:none;");//隐藏div
            $("#stat3").attr("style", "display:none;");//隐藏div
        });

        function stat1() {
            $("#stat1").attr("style", "display:block;");//显示div
            $("#stat2").attr("style", "display:none;");//隐藏div
            $("#stat3").attr("style", "display:none;");//隐藏div
            $.ajax({
                url: '/account/get_by_earning',
                type: 'get',
                cache: false,
                success: function (res) {
                    allresult = JSON.parse(res);
                    console.log(allresult)
                    $("#tbodycontent").html("");
                    var stock_value = 0
                    var stock_earning = 0
                    for (i = 0; i < allresult.length; i++) {
                        var row = i + 1
                        tmpone = allresult[i]['total_earning'] > 0 ? '<tr style="color: red">' : '<tr style="color: green">';
                        tmpone = tmpone + '<td>' + row + '</td>'
                        tmpone = tmpone + '<td>' + allresult[i]['account_name'] + '</td>'
                        tmpone = tmpone + '<td>' + allresult[i]['balance'] + '</td>'
                        tmpone = tmpone + '<td>' + allresult[i]['accu_earning'] + '</td>'
                        tmpone = tmpone + '<td>' + allresult[i]['stock_cost'] + '</td>'
                        tmpone = tmpone + '<td>' + allresult[i]['stock_value'] + '</td>'
                        tmpone = tmpone + '<td>' + (allresult[i]['total_earning'] - allresult[i]['accu_earning']) + '</td>'
                        tmpone = tmpone + '<td>' + allresult[i]['total_earning'] + '</td>'
                        tmpone = tmpone + '</tr>'
                        $("#tbodycontent").append(tmpone);
                    }
                },
                error: function (XmlHttpRequest, textStatus, errorThrown) {
                    alert("帐户信息添加失败;" + XmlHttpRequest.responseText);
                }
            });

        }

        function stat2() {
            $("#stat2").attr("style", "display:block;");//显示div
            $("#stat1").attr("style", "display:none;");//隐藏div
            $("#stat3").attr("style", "display:none;");//隐藏div
            // 后台获取当前用户资金分布
            $.ajax({
                url: '/account/investment_stat',
                type: 'get',
                cache: false,
                success: function (res) {
                    nums = JSON.parse(res);
                    console.log(nums)
                    var chartDom = document.getElementById('echarts_main');
                    var myChart = echarts.init(chartDom);
                    var option;

                    option = {
                        legend: {
                            top: 'bottom'
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                mark: {show: true},
                                dataView: {show: true, readOnly: false},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        series: [
                            {
                                name: '面积模式',
                                type: 'pie',
                                radius: [50, 250],
                                center: ['50%', '50%'],
                                roseType: 'area',
                                itemStyle: {
                                    borderRadius: 8
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'inner',
                                        formatter: '{b}: {c}({d}%)'
                                    }
                                },
                                data: nums
                            }
                        ]
                    };

                    option && myChart.setOption(option);
                }
            });
        }

        function stat3() {
            $("#stat3").attr("style", "display:block;");//显示div
            $("#stat1").attr("style", "display:none;");//隐藏div
            $("#stat2").attr("style", "display:none;");//隐藏div
        }
    </script>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="row">
            <div class="col-2" style="background-color: #dee2e6">
                <ul class="list-group" style="height: 500px;margin-left: -15px;width: 118%">
                    <button type="button" class="list-group-item list-group-item-action" onclick="stat1()">收益排名</button>
                    <button type="button" class="list-group-item list-group-item-action" onclick="stat2()">持仓分析</button>
                    <button type="button" class="list-group-item list-group-item-action" onclick="stat3()">大盘行情</button>
                </ul>
            </div>
            <div class="col-10">
                <div id="stat1">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th scope="col">排序</th>
                            <th scope="col">帐户名称</th>
                            <th scope="col">帐户余额</th>
                            <th scope="col">已获收益</th>
                            <th scope="col">持仓成本</th>
                            <th scope="col">持仓现值</th>
                            <th scope="col">持仓收益</th>
                            <th scope="col">总收益</th>
                        </tr>
                        </thead>
                        <tbody id="tbodycontent">

                        </tbody>
                    </table>
                </div>
                <div id="stat2">
                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                    <div id="echarts_main" style="width: 600px;height:500px;"></div>
                </div>
                <div id="stat3">
                    <p>
                        <img alt="" src="http://image.sinajs.cn/newchart/min/n/sh000001.gif">
                    </p>
                    <p>
                        <img alt="" src="http://image.sinajs.cn/newchart/daily/n/sh000001.gif">
                    </p>
                    <p>
                        <img alt="" src="http://image.sinajs.cn/newchart/min/n/sz399001.gif">
                    </p>
                    <p>
                        <img alt="" src="http://image.sinajs.cn/newchart/daily/n/sz399001.gif">
                    </p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}